{extend name="iframe" /}
{block name="css"}
    <style type="text/css">
        .editForm{
            margin-top: 20px;
        }
        .submit_btn{
            display: none;
        }
        @media (min-width: 768px){
            .bootstrap-switch{
                margin-top: 7px;
            }
        }
        select[readonly] {
            background: #eee;
            cursor: no-drop;
        }

        select[readonly] option {
            display: none;
        }
    </style>
{/block}

{block name="content"}
    <div class="container-fluid content-wrapper-box">
        <div class="content-wrapper">
            <form class="form-horizontal editForm" action="" method="post">
                <div class="form-group">
                    <label class="control-label col-xs-2">
                        订单号&nbsp;
                    </label>
                    <div class="col-xs-8">
                        <p class="form-control-static">{$data.order_no}</p>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-2">
                        <em class="must_fill"></em>客户姓名&nbsp;
                    </label>
                    <div class="col-xs-8">
                        <input type="text" value="{$data.order_nickname}" name="order_nickname" class="form-control" placeholder="订单客户姓名" data-msg="客户姓名不能为空">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-2">
                        <em class="must_fill">*</em>手机号&nbsp;
                    </label>
                    <div class="col-xs-8">
                        <input type="text" value="{$data.order_phone}" name="order_phone" class="form-control" placeholder="订单联系人手机" required data-msg="手机号不能为空">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-2">
                        微信&nbsp;
                    </label>
                    <div class="col-xs-8">
                        <input type="text" value="{$data.order_wechat}" name="order_wechat" class="form-control" placeholder="订单联系人微信号">
                    </div>
                </div>
                <!--【选择服务项目】-->
                <div class="form-group">
                    <label class="control-label col-xs-2">
                        <em class="must_fill">*</em>服务项目&nbsp;
                    </label>
                    <div class="col-xs-8">
                        <input type="text" value="{$data.srv_item_id}" id="srv_item_id" name="srv_item_id" class="form-control"
                               <?php if( !array_intersect(session('admin')['roleIds'], ['1', '2', '3',]) ){  ?>
                               {if $data.order_status > 1 } disabled="disabled" {/if}
                                <?php }  ?>
                               placeholder="选择服务项目" required data-msg="服务项目不能为空">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-2">
                        <em class="must_fill">*</em>服务面积
                    </label>
                    <div class="col-xs-8">
                        <input type="text" value="{$data.service_area}" name="service_area" class="form-control" placeholder="服务的建筑物或者房屋面积" required data-msg="服务面积必须填写">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-2">
                        <em class="must_fill">*</em>服务时间&nbsp;
                    </label>
                    <div class="col-xs-8">
                        <input type="text" value="{$data.service_time}" name="service_time" class="form-control dateTimePicker" placeholder="服务时间">
                    </div>
                </div>
                <!--【省市区】-->
                <div class="form-group">
                    <label class="control-label col-xs-2">
                        服务地区&nbsp;
                    </label>
                    <div class="col-xs-8 form-inline" id="cxselect_addr">
                        <select class="province form-control" name="province" data-first-title="选择省" data-value="{$data.province}"></select>
                        <select class="city form-control" name="city" data-first-title="选择市" data-value="{$data.city}"></select>
                        <select class="area form-control" name="area" data-first-title="选择区" data-value="{$data.area}"></select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-2">
                        详细地址&nbsp;
                    </label>
                    <div class="col-xs-8">
                        <div class="input-group">
                            <input type="text" class="form-control" id="addr" name="addr" value="{$data.addr}" placeholder="输入所在城市详细地址" required data-msg="详细地址不能为空">
                            <div class="input-group-btn">
                                <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-2">
                        服务费用(￥)&nbsp;
                    </label>
                    <div class="col-xs-8">
                        <input type="text" value="{$data.fee}" id="fee" name="fee" placeholder="服务费用" class="form-control"  class="required email">
                    </div>
                </div>
                <!--【选择商家】-->
                <div class="form-group">
                    <label class="control-label col-xs-2">
                        <em class="must_fill">*</em>选择服务商家&nbsp;
                    </label>
                    <div class="col-xs-8">
                        <input type="text" value="{$data.mch_id}" id="mch_id" name="mch_id" class="form-control" placeholder="选择服务商家"
                        <?php if( !array_intersect(session('admin')['roleIds'], ['1', '2', '3',]) ){  ?>
                               {if $data.order_status > 1 } disabled="disabled" {/if}
                        <?php }  ?>
                                data-msg="商家不能为空">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-2">
                        <em class="must_fill">*</em>订单状态&nbsp;
                    </label>
                    <div class="col-xs-8">
                        <select class="form-control" id="order_status" name="order_status"
                                <?php if( !array_intersect(session('admin')['roleIds'], ['1', '2', '3',]) ){  ?>
                                readonly
                                <?php }  ?>
                                required data-msg="选择订单状态">
                            <option value="">请选择</option>
                            {foreach $order_status as  $val=>$ss}
                            <option value="{$val}" {if $data.order_status == $val } selected {/if}>{$ss}</option>
                            {/foreach}
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-2">
                        备注&nbsp;
                    </label>
                    <div class="col-xs-8">
                        <textarea  name="brief" class="form-control" placeholder="注意事项备注说明">{$data.brief}</textarea>
                    </div>
                </div>

                <input type="hidden" name="id" value="{$data.id}">
                <input class="btn btn-primary submit_btn" onclick="submitFrom()" type="submit">
                <input class="btn btn-default reset_btn" type="hidden" onclick="resetForm()">
            </form>
        </div>
    </div>
{/block}

{block name="script"}
<script type="text/javascript" charset="utf-8" src="__STATIC__/plugins/cxselect/jquery.cxselect.min.js"> </script>
<script src="__STATIC__/plugins/suggest/bootstrap-suggest.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#order_status').val('{$data.order_status}');
            //初始化日期控件
            dateTimePickerInit();

            $.validator.setDefaults({
                errorPlacement: function (error, element) {
                    if (element.is(":radio") || element.is(":checkbox")) {
                        error.appendTo(element.parent().parent());
                    } else {
                        error.appendTo(element.parent());
                    }
                }
            });

            $('#cxselect_addr').cxSelect({
                url: '/public/admin/plugins/cxselect/cityData.min.json',
                selects: ['province', 'city', 'area'],
                emptyStyle: 'none'
            });

            $("#addr").bsSuggest({
                url: "{:url('Api/searchAddr')}",
                getDataMethod: "url",
                effectiveFields: ["province", "city", "district", "title", "address"],
                effectiveFieldsAlias:{province: "省",city: "市",district: "区",title: "提示文字",address: "地址"},
                searchFields: ["province", "city", "district", "title", "address"],
                showBtn: false,
                showHeader: false,
                idField: "id",
                keyField: "title",
                allowNoKeyword: false,
                fnAdjustAjaxParam: function(keyword, opts) {
                    var province = $('.province').val();
                    var city = $('.city').val();
                    return {
                        timeout: 6000,
                        data: {
                            region: city? city: province,
                            keyword: $('#addr').val()
                        }
                    };
                }
            }).on('onSetSelectValue', function (e, selectedData, selectedRowData) {
                $('#addr').val(selectedData.key + '-' + selectedRowData.address);
                if(selectedRowData.province === selectedRowData.city){
                    $('.province').val( selectedRowData.province ).change();
                    $('.city').val( selectedRowData.district );

                }else{
                    $('.province').val( selectedRowData.province ).change();
                    $('.city').val( selectedRowData.city ).change();
                    $('.area').val( selectedRowData.district );
                }
            });


        });

        //初始化日期控件
        function dateTimePickerInit() {
            $('.dateTimePicker').datetimepicker({
                format: 'YYYY-MM-DD HH:mm:ss',
                locale: moment.locale('zh-cn')
            });
        }

        var srvItems = {$srvItems | da_jencode |raw};
        $('#srv_item_id').selectPage({
            showField : 'service_name',
            keyField : 'id',
            data : srvItems
        });
        var merchs = {$merchs | da_jencode |raw};
        $('#mch_id').selectPage({
            showField : 'name',
            keyField : 'id',
            eSelect : function(data){
                $('#order_status').val('2');    //已派送
            },
            data : merchs
        });



        //提交表单
        function submitFrom() {
            var  frameIndex= parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            //表单验证
            $(".editForm").validate({
                keydown:true,
                rules:{
                    fee: {
                        required: true,
                        number: true
                    },
                },
                message:{
                    fee: {
                        required: "服务费用",
                        number: "请输入正确的服务费用"
                    },
                },
                submitHandler: function(form) {
                    $(form).ajaxSubmit({
                        dataType:'json',
                        success:function (response) {
                            if(response.code === 0){
                                parent.toastr.success(response.msg);
                                parent.layer.close(frameIndex);
                            }else{
                                parent.toastr.error(response.msg);
                            }
                            //刷新数据表格
                            parent.searchForm();
                        }
                    });
                }
            })
        }
    </script>
{/block}
